<template>
  <div class="iframe-container">
    <iframe :src="src" scrolling="auto" frameborder="0" class="frame" :onload="onloaded()">
    </iframe>
  </div>
</template>

<script>
import { initWebSocket, sendMessage } from "@/utils/socket";
export default {
  data() {
    return {
      src: "",
      websock: '',
      loading: null,
      appId: '',
    };
  },
  methods: {
    // 获取请求路径
    getUrl: function() {
      //TODO appId， 查询数据库获取src
      this.$api.apps.findAppById({id:this.appId}).then((res) => {
				console.log(res);
				if(res.code == 200) {
          this.src = res.data.host;
				} else {
					this.$message({message: '打开应用失败, ' + res.msg, type: 'error'})
				}
      })
      this.load()
    },
    load: function() {
      this.loading = this.$loading({  
        lock: true,
        text: "loading...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
        target: document.querySelector("#main-container")
      })
    },
    onloaded: function() {
      if(this.loading) {
        this.loading.close()
      }
    }
  },
  mounted() {
    const url = window.location.href
    this.appId = url.substring(url.lastIndexOf("/") + 1, url.length)
    this.getUrl();
    // setTimeout( function(){
    //   initWebSocket(appId);
    // }, 1 * 1000 );
  }
};
</script>

<style lang="scss">
.iframe-container {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;;
  bottom: 0px;
  .frame {
    width: 100%;
    height: calc(100vh - 3px);
  }
}
</style>